---
title: Writing HTML
description: How to write concise html markup in Jaspr.
---

---

With jaspr, you write html as part of your component tree. Each html tag (like `div`, `p`, `img`, etc.) has an assigned method you can use (reps. `div()`, `p()`, `img()`, etc.).

Let's look at the following html snippet:

```html
<div>
  <h1>This is a title</h1>
  <p>Hello <b>World!</b></p>
</div>
```

Within a jaspr component, this can be represented as such:

```dart
div([
  h1([text('This is a title')]),
  p([text('Hello '), b([text('World!')])]),
]);
```

The special `text()` method does not add a html tag but renders plain text inside other elements.

## HTML utilities

There exist methods for the most common html tags, like `div`, `a`, `p`, `img` as well as more special tags like
`video`, `form`, `input` and others.

<Info>
If you want support for a tag that does not have such a method yet, please don't hesitate to open an issue on github.
</Info>

Each method has the following signature:

```dart
Component <tagname>(List<Component> children, {
  Key? key,
  String? id,
  String? classes,
  Styles? styles,
  Map<String, String>? attributes,
  Map<String, EventCallback>? events,
});
```

In addition to these parameters some methods have tag-specific attributes, like `img(src: "...")` or `a(href: "...")`.

For readability, it is recommended to put the list of child components last in the parameter list:
`div(id: "main", [text('Hello World')])` is more readable than `div([text('Hello World')], id: "main")`.
In case of no children specify an empty list (`[]`). Some tags also omit this parameter, like `img`.

[Try it out on JasprPad](https://playground.jaspr.site/?sample=html)

---

Finally, here are some more examples of this syntax. You can switch between the dart code and rendered html output.

<CodeGroup title="Paragraph with rich text">
  ```dart
    p([text('This is some '),b([text('html')]),text(' content.')])
  ```
  ```html
    <p>This is some <b>html</b> content.</p>
  ```
</CodeGroup>

<CodeGroup title="Heading with blue text">
    ```dart
    h1(styles: Styles.text(color: Colors.blue), [text('Hello Jaspr!')])
    ```
    ```html
    <h1 style="color: blue;">Hello Jaspr!</h1>
    ```
</CodeGroup>

<CodeGroup title="Anchor with an image">
  ```dart
    a(href: "https://github.com/schultek/jaspr", target: Target.blank, [
      img(src: "https://playground.jaspr.site/jaspr-192.png"),
    ])
  ```
  ```html
    <a href="https://github.com/schultek/jaspr" target="_blank">
      <img src="https://playground.jaspr.site/jaspr-192.png" />
    </a>
  ```
</CodeGroup>

<CodeGroup title="Select input">
  ```dart
    select([
      option(value: 'test', [text('Select me!')]),
      option(value: 'other', selected: true, [text('Or me!')])
    ])
  ```
  ```html
    <select>
      <option value="test">Select me!</option>
      <option value="other" selected>Or me!</option>
    </select>
  ```
</CodeGroup>

<CodeGroup title="Progress bar">
    ```dart
    progress(value: 85, max: 100, [])
    ```
    ```html
    <progress value="85" max="100"></progress>
    ```
</CodeGroup>
